<template>
  <div class="favorite-tab">
    <div>
      <el-form inline label-position="top">
        <el-form-item label="备注">
          <el-input v-model.trim="query.remark" placeholder="" clearable maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="重置/搜索">
          <el-button icon="el-icon-refresh" @click="onRefresh"></el-button>
          <el-badge :value="data.length" :hidden="!data.length" :max="100" type="primary">
            <el-button type="primary" icon="el-icon-search" @click="onSearch"></el-button>
          </el-badge>
        </el-form-item>
      </el-form>
    </div>
    <div class="scroll-view">
      <el-empty v-if="!data.length"></el-empty>
      <el-card class="item" v-for="(group, index) in data" :key="group.id">
        <div class="title">
          <h4>
            {{index+1}}、{{new Date( group.cTime).toLocaleString()}}
            <span class="btn-delete" @click="onRemove(group.id)">
              <i class="el-icon-delete"></i>
            </span>
          </h4>
          <el-input v-model="group.remark" placeholder="备注" clearable maxlength="50" @change="updateRemark($event, group.id)"></el-input>
        </div>
        <l-table :data="group.data" :columns="columns" show-summary :default-sort = "{prop: 'name', order: 'descending'}"></l-table>
      </el-card>
    </div>
  </div>
</template>

<script>
module.exports = {
  inject: ['app'],
  components:{
    LTable: httpVueLoader('./LTable.vue'),
  },
  data() {
    return {
      data: [],
      query:{},
      columns: [
        { label: "名称", prop: "name" },
        { label: "位置", prop: "direction" },
      ],
    }
  },
  mounted() {
    this.columns = [
      ...this.columns,
      ...this.app.dataset.properties.map((v) => {
        return {
          label: v,
          prop: v,
        };
      }),
    ];
    this.onSearch();
  },
  actived() {
    console.log('12')
  },
  methods:{
    onSearch() {
      let data = this.app.dataset.favorites.filter( v => {
        return !this.query.remark || (v.remark && v.remark.includes(this.query.remark));
      });
      data.sort((a,b) => b.cTime - a.cTime);
      this.data = data;
    },
    onRefresh() {
      this.query = {};
      this.onSearch();
    },
    updateRemark(val, id) {
      let list = [...this.app.dataset.favorites];
      const index = list.findIndex( v => v.id === id);
      if(index >=0 ) {
        list[index].remark = val;
        storage.updateFavorite(list);
        this.app.update();
      }
      
    },
    onRemove(id) {
      this.$confirm("是否删除该收藏", "提示", {
        type: "warning",
      }).then(() => {
        let list = this.app.dataset.favorites.filter( v => v.id !== id);
        storage.updateFavorite(list);
        this.app.update();
        this.onSearch();
      })
    }

  }
}
</script>

<style scoped>
.favorite-tab{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view{
  height: 0;
  flex: 1;
  overflow: auto;
}
.scroll-view .item{
  margin-bottom: 20px;
}
.btn-delete{
  margin-left:20px;
  cursor: pointer;
}
</style>